<template>
  <span v-if="showTheme">
    <amf-remix-icon
      icon-class="brush-2-line"
      @click="handleOpenTheme"
    ></amf-remix-icon>
    <!--    <div class="theme-setting">-->
    <!--      <div @click="handleOpenTheme">-->
    <!--        <amf-remix-icon icon-class="brush-2-line"></amf-remix-icon>-->
    <!--        <p>{{ translateTitle('主题配置') }}</p>-->
    <!--      </div>-->
    <!--      <div @click="randomTheme">-->
    <!--        <amf-remix-icon icon-class="apps-line"></amf-remix-icon>-->
    <!--        <p>{{ translateTitle('随机换肤') }}</p>-->
    <!--      </div>-->
    <!--      <div @click="getCode">-->
    <!--        <amf-remix-icon icon-class="file-copy-line"></amf-remix-icon>-->
    <!--        <p>{{ translateTitle('拷贝源码') }}</p>-->
    <!--      </div>-->
    <!--    </div>-->

    <el-drawer
      :title="translateTitle('主题配置')"
      :visible.sync="drawerVisible"
      append-to-body
      direction="rtl"
      size="560px"
    >
      <el-scrollbar class="theme-scrollbar">
        <div class="el-drawer__body">
          <el-form ref="form" :model="theme" label-width="90px">
            <el-form-item :label="translateTitle('布局')">
              <el-radio-group v-model="theme.layout">
                <el-radio-button label="gallery">
                  {{ translateTitle('画廊') }}
                </el-radio-button>
                <el-radio-button label="comprehensive">
                  {{ translateTitle('综合') }}
                </el-radio-button>
                <el-radio-button label="vertical">
                  {{ translateTitle('纵向') }}
                </el-radio-button>
                <el-radio-button label="horizontal">
                  {{ translateTitle('横向') }}
                </el-radio-button>
                <el-radio-button label="common">
                  {{ translateTitle('常规') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="translateTitle('主题')">
              <el-radio-group v-model="theme.themeName" @click="saveTheme">
                <el-radio-button label="default">
                  {{ translateTitle('默认') }}
                </el-radio-button>
                <el-radio-button label="ocean">
                  {{ translateTitle('海洋之心') }}
                </el-radio-button>
                <el-radio-button label="green">
                  {{ translateTitle('绿荫草场') }}
                </el-radio-button>
                <el-radio-button label="glory">
                  {{ translateTitle('荣耀典藏') }}
                </el-radio-button>
                <el-radio-button label="white">
                  {{ translateTitle('碰触纯白') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item :label="translateTitle('头部')">
              <el-radio-group
                v-model="theme.header"
                :disabled="theme.layout === 'common'"
              >
                <el-radio-button label="fixed">
                  {{ translateTitle('固定') }}
                </el-radio-button>
                <el-radio-button label="noFixed">
                  {{ translateTitle('不固定') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="translateTitle('多标签')">
              <el-radio-group v-model="theme.showTagsBar">
                <el-radio-button :label="true">
                  {{ translateTitle('显示') }}
                </el-radio-button>
                <el-radio-button :label="false">
                  {{ translateTitle('不显示') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item :label="translateTitle('国际化')">
              <el-radio-group v-model="theme.showLanguage">
                <el-radio-button :label="true">
                  {{ translateTitle('显示') }}
                </el-radio-button>
                <el-radio-button :label="false">
                  {{ translateTitle('不显示') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="translateTitle('进度条')">
              <el-radio-group v-model="theme.showProgressBar">
                <el-radio-button :label="true">
                  {{ translateTitle('显示') }}
                </el-radio-button>
                <el-radio-button :label="false">
                  {{ translateTitle('不显示') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="translateTitle('刷新')">
              <el-radio-group v-model="theme.showRefresh">
                <el-radio-button :label="true">
                  {{ translateTitle('显示') }}
                </el-radio-button>
                <el-radio-button :label="false">
                  {{ translateTitle('不显示') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="translateTitle('搜索')">
              <el-radio-group v-model="theme.showSearch">
                <el-radio-button :label="true">
                  {{ translateTitle('显示') }}
                </el-radio-button>
                <el-radio-button :label="false">
                  {{ translateTitle('不显示') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="translateTitle('通知')">
              <el-radio-group v-model="theme.showNotice">
                <el-radio-button :label="true">
                  {{ translateTitle('显示') }}
                </el-radio-button>
                <el-radio-button :label="false">
                  {{ translateTitle('不显示') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="translateTitle('全屏')">
              <el-radio-group v-model="theme.showFullScreen">
                <el-radio-button :label="true">
                  {{ translateTitle('显示') }}
                </el-radio-button>
                <el-radio-button :label="false">
                  {{ translateTitle('不显示') }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button @click="setDefaultTheme">
                {{ translateTitle('恢复默认') }}
              </el-button>
              <el-button type="primary" @click="saveTheme">
                {{ translateTitle('保存') }}
              </el-button>
            </el-form-item>
          </el-form>
          <el-alert
            :closable="false"
            :title="translateTitle('主题配置描述')"
            type="warning"
          ></el-alert>
        </div>
      </el-scrollbar>
    </el-drawer>
  </span>
</template>

<script>
  import { translateTitle } from '@/utils/i18n';
  import { mapActions, mapGetters } from 'vuex';
  import {
    header as defaultHeader,
    layout as defaultLayout,
    showFullScreen as defaultShowFullScreen,
    showLanguage as defaultShowLanguage,
    showNotice as defaultShowNotice,
    showProgressBar as defaultShowProgressBar,
    showRefresh as defaultShowRefresh,
    showSearch as defaultShowSearch,
    showTagsBar as defaultShowTagsBar,
  } from '@/config/settings';

  export default {
    name: 'Theme',
    data() {
      return {
        drawerVisible: false,
        theme: {
          themeName: '',
          layout: '',
          header: '',
          showLanguage: '',
          showProgressBar: '',
          showRefresh: '',
          showSearch: '',
          showTagsBar: '',
          showNotice: '',
          showFullScreen: '',
        },
      };
    },
    computed: {
      ...mapGetters({
        themeName: 'settings/themeName',
        layout: 'settings/layout',
        header: 'settings/header',
        showLanguage: 'settings/showLanguage',
        showProgressBar: 'settings/showProgressBar',
        showRefresh: 'settings/showRefresh',
        showSearch: 'settings/showSearch',
        showTagsBar: 'settings/showTagsBar',
        showNotice: 'settings/showNotice',
        showFullScreen: 'settings/showFullScreen',
        showTheme: 'settings/showTheme',
      }),
    },
    created() {
      this.$baseEventBus.$on('theme', () => {
        this.handleOpenTheme();
      });
      this.$baseEventBus.$on('randomTheme', () => {
        this.randomTheme();
      });
      const theme = localStorage.getItem('access-ms-frame-theme');
      if (null !== theme) {
        this.theme = JSON.parse(theme);
        this.saveTheme();
      } else {
        this.handleSetData();
      }
    },
    methods: {
      translateTitle,
      ...mapActions({
        changeHeader: 'settings/changeHeader',
        changeLayout: 'settings/changeLayout',
        handleShowLanguage: 'settings/handleShowLanguage',
        handleShowProgressBar: 'settings/handleShowProgressBar',
        handleShowRefresh: 'settings/handleShowRefresh',
        handleShowSearch: 'settings/handleShowSearch',
        handleShowTagsBar: 'settings/handleShowTagsBar',
        handleShowNotice: 'settings/handleShowNotice',
        handleShowFullScreen: 'settings/handleShowFullScreen',
      }),
      shuffle(array) {
        var m = array.length,
          t,
          i;
        while (m) {
          i = Math.floor(Math.random() * m--);
          t = array[m];
          array[m] = array[i];
          array[i] = t;
        }
        return array;
      },
      randomTheme() {
        const loading = this.$baseColorfullLoading(
          0,
          '随机换肤只用于演示会在页面刷新时自动失效，请放心切换，如需保存，在主题配置中保存...',
        );
        const themeNameArray = ['default', 'ocean', 'green', 'glory', 'white'];
        const layoutArray = [
          'horizontal',
          'vertical',
          'gallery',
          'comprehensive',
          'common',
        ];
        this.theme.themeName = this.shuffle(themeNameArray)[0];
        this.theme.layout = this.shuffle(layoutArray)[0];
        if (document.body.getBoundingClientRect().width >= 992) {
          this.changeLayout(this.theme.layout);
        }
        document.getElementsByTagName(
          'body',
        )[0].className = `access-ms-frame-theme-${this.theme.themeName}`;
        setTimeout(() => {
          loading.close();
        }, 1300);
      },
      handleSetData() {
        this.theme.themeName = this.themeName;
        this.theme.layout = this.layout;
        this.theme.header = this.header;
        this.theme.showLanguage = this.showLanguage;
        this.theme.showProgressBar = this.showProgressBar;
        this.theme.showRefresh = this.showRefresh;
        this.theme.showSearch = this.showSearch;
        this.theme.showTagsBar = this.showTagsBar;
        this.theme.showNotice = this.showNotice;
        this.theme.showFullScreen = this.showFullScreen;
        document.getElementsByTagName(
          'body',
        )[0].className = `access-ms-frame-theme-${this.themeName}`;
      },
      handleOpenTheme() {
        this.drawerVisible = true;
      },
      saveTheme() {
        let {
          themeName,
          layout,
          header,
          showLanguage,
          showProgressBar,
          showRefresh,
          showSearch,
          showTagsBar,
          showNotice,
          showFullScreen,
        } = this.theme;
        localStorage.setItem(
          'access-ms-frame-theme',
          `{
              "themeName":"${themeName}",
              "layout":"${layout}",
              "header":"${header}",
              "showLanguage":${showLanguage},
              "showProgressBar":${showProgressBar},
              "showRefresh":${showRefresh},
              "showSearch":${showSearch},
              "showTagsBar":${showTagsBar},
              "showNotice":${showNotice},
              "showFullScreen":${showFullScreen}
            }`,
        );
        document.getElementsByTagName(
          'body',
        )[0].className = `access-ms-frame-theme-${themeName}`;

        if (document.body.getBoundingClientRect().width >= 992) {
          this.changeLayout(layout);
        }
        this.changeHeader(header);
        this.handleShowLanguage(showLanguage);
        this.handleShowProgressBar(showProgressBar);
        this.handleShowRefresh(showRefresh);
        this.handleShowSearch(showSearch);
        this.handleShowTagsBar(showTagsBar);
        this.handleShowNotice(showNotice);
        this.handleShowFullScreen(showFullScreen);
        this.drawerVisible = false;
      },
      setDefaultTheme() {
        let { themeName } = this.theme;
        document
          .getElementsByTagName('body')[0]
          .classList.remove(`access-ms-frame-theme-${themeName}`);
        localStorage.removeItem('access-ms-frame-theme');
        this.$refs['form'].resetFields();
        Object.assign(this.$data, this.$options.data());
        this.changeLayout(defaultLayout);
        this.changeHeader(defaultHeader);
        this.handleShowLanguage(defaultShowLanguage);
        this.handleShowProgressBar(defaultShowProgressBar);
        this.handleShowRefresh(defaultShowRefresh);
        this.handleShowSearch(defaultShowSearch);
        this.handleShowTagsBar(defaultShowTagsBar);
        this.handleShowNotice(defaultShowNotice);
        this.handleShowFullScreen(defaultShowFullScreen);
        this.handleSetData();
        this.drawerVisible = false;
      },
      getCode() {
        const url =
          'http://git.idanchuang.net/frontend-framework/access-ms-frame/tree/master/src/views';
        let path = this.$route.path + '/index.vue';
        if (path === '/amf/icon/remixIcon/index.vue') {
          path = '/amf/icon/remixIcon.vue';
        }
        if (path === '/amf/icon/colorfulIcon/index.vue') {
          path = '/amf/icon/colorfulIcon.vue';
        }
        if (path === '/amf/table/comprehensiveTable/index.vue') {
          path = '/amf/table/comprehensiveTable.vue';
        }
        if (path === '/amf/table/inlineEditTable/index.vue') {
          path = '/amf/table/inlineEditTable.vue';
        }
        if (path === '/amf/table/customTable/index.vue') {
          path = '/amf/table/customTable.vue';
        }
        if (path === '/amf/drag/dialogDrag/index.vue') {
          path = '/amf/drag/dialogDrag.vue';
        }
        if (path === '/amf/drag/cardDrag/index.vue') {
          path = '/amf/drag/cardDrag.vue';
        }
        if (path === '/amf/form/comprehensiveForm/index.vue') {
          path = '/amf/form/comprehensiveForm.vue';
        }
        if (path === '/amf/form/stepForm/index.vue') {
          path = '/amf/form/stepForm.vue';
        }
        if (path === '/amf/editor/richTextEditor/index.vue') {
          path = '/amf/editor/richTextEditor.vue';
        }
        if (path === '/amf/editor/markdownEditor/index.vue') {
          path = '/amf/editor/markdownEditor.vue';
        }
        if (path === '/amf/menu1/menu1-1/menu1-1-1/index.vue') {
          path = '/amf/nested/menu1/menu1-1/menu1-1-1/index.vue';
        }
        if (path === '/amf/excel/exportExcel/index.vue') {
          path = '/amf/excel/exportExcel.vue';
        }
        if (path === '/amf/excel/exportSelectedExcel/index.vue') {
          path = '/amf/excel/exportSelectedExcel.vue';
        }
        if (path === '/amf/excel/exportMergeHeaderExcel/index.vue') {
          path = '/amf/excel/exportMergeHeaderExcel.vue';
        }
        window.open(url + path);
      },
    },
  };
</script>

<style lang="scss" scoped>
  @mixin right-bar {
    position: fixed;
    right: 0;
    z-index: $base-z-index;
    width: 60px;
    min-height: 60px;
    text-align: center;
    cursor: pointer;
    background: $base-color-blue;
    border-radius: $base-border-radius;

    > div {
      padding-top: 10px;
      border-bottom: 0 !important;

      &:hover {
        opacity: 0.9;
      }

      & + div {
        border-top: 1px solid $base-color-white;
      }

      p {
        padding: 0;
        margin: 0;
        font-size: $base-font-size-small;
        line-height: 30px;
        color: $base-color-white;
      }
    }
  }

  .theme-scrollbar {
    height: calc(100vh - 80px);
    overflow: hidden;
  }

  .theme-setting {
    @include right-bar;

    top: calc((100vh - 110px) / 2);

    ::v-deep {
      [class*='ri-'] {
        display: block !important;
        margin-right: auto !important;
        margin-left: auto !important;
        color: $base-color-white !important;
        fill: $base-color-white !important;
      }
    }
  }

  .el-drawer__body {
    padding: 0 20px 20px 20px;
  }
</style>
<style lang="scss">
  .el-drawer__wrapper {
    outline: none !important;

    * {
      outline: none !important;
    }
  }

  .amf-color-picker {
    .el-color-dropdown__link-btn {
      display: none;
    }
  }
</style>
